<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/9/28
  Time: 23:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css/"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css/"/>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.5.0.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<head>
    <title>课程管理界面</title>
    <div>
        <button class="button" onclick="addOne()">新增课程</button>
    </div>
</head>
<body>
<div class="margin">
    <table class="table">
        <thead>
        <tr>
            <td>课程编号</td>
            <td>课程名</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>
</div>
<%--分页区域--%>
<div class="margin">
    每页显示<select id="pageSizeSelect" onchange="onSelectChange()">
    <option value="2" select="selected">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
</select> 条数据，当前是第<span id="currentPageSpan" onchange"onchange()"></span> 页，
    总共<span id="totalPageSpan" onchange="AllPage()"></span>页
    <button class="button" onclick="firstPage()">首页</button>
    <button class="button" onclick="perPage()">上一页</button>
    <button class="button" onclick="nextPage()">下一页</button>
    <button class="button" onclick="lastPage()">尾页</button>

</div>
<%--这里的div做一个编辑班级信息的模态框--%>
<div class="modal" id="Modal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>课程编辑</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">课程</label>
                <input class="form-control" type="text" id="courseNameInput" placeholder="请输入课程名"></br>
                <input type="hidden" id="courseIdInput">
            </div>
            <div class="modal-footer">
                <button class="button" data-dismiss="modal">取消</button>
                <button class="button" onclick="checkChoose()">确定</button>
            </div>
        </div>
    </div>
</div>
<script>
    //当前页码
    var currentPage=1;
    //每页记录数
    var pageSize=2;
    //总页数
    var totalPage;
    $(function() {
        getListByPage();
    });
    function onSelectChange() {
        pageSize=$("#pageSizeSelect").val();
        currentPage=1;
        getListByPage();
    }
    //查询总页数
    function AllPage() {
        pageSize=$("#currentPageSpan").val();
        getListByPage();
    }
    //用户修改的每一页的记录数
    function onchange() {
        totalPage=$("#currentPageSpan").val();
        getListByPage();
    }
    //首页的回调方法
    function firstPage() {
        currentPage=1;
        getListByPage();
    }
    //上一页的回调方法
    function perPage() {
        if (currentPage<=1){
            currentPage=1;
        }else {
            currentPage--;
            getListByPage();
        }
    }
    //下一页回调方法
    function nextPage() {

        if (currentPage>=totalPage){
            currentPage=totalPage;
        }else {
            currentPage++;
            getListByPage();
        }
    }

    //尾页回调方法
    function lastPage() {
        currentPage=totalPage;
        getListByPage();
    }
    function addOne() {
        showModal();
    }
    $(function()
    {
        getListByPage()
    });
    function  showCourseList(courseList){
        var html='';
        for (var i = 0; i <courseList.length ; i++) {
            var  item =courseList[i];
            html+="<tr>";
            html+="<td>"+item.id +"</td>";
            html+="<td>"+item.name +"</td>";
            html+="<td><button class='button' onclick='getOneCourse(\""+item.id+"\")'>编辑</button>" +
                "<button class='button' onclick='deleteOneCourse(\""+item.id+"\")'>删除</button></td>";
            html+="</tr>";
        }
        $("#tb").html(html);
    }
    function getCourseList() {
        $.ajax({
            url:"${pageContext.request.contextPath}/course/getCourseList",
            type:"get",
            dataType:"json",
            success:function (result) {
                if (result.code==0){
                    showCourseList(result.courseList);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    function getListByPage() {
    $.ajax({
            url:"${pageContext.request.contextPath}/course/getListByPage",
            type:"get",
            data:{
                "currentPage":currentPage,
                "pageSize":pageSize
            },
            dataType: "json",
            success:function (result) {
                if (result.code==0){
                    showCourseList(result.courseList);
                    totalPage=result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (error) {
                console.log(JSON.stringify(error))
            }
        });
    }
    function getOneCourse(id) {
        $.ajax({
            url:"${pageContext.request.contextPath}/course/getOneCourse",
            type:"get",
            data:{
                "id":id
            },
            dataType:'json',
            success:function (result) {
                if (result.code==0) {
                    showModal(result.courseList);
                }else {
                    alert(result.message);
                }
            },
            error:function (error) {
                console.log(JSON.stringify(error));
            }
        })
    }
    function checkChoose(){
        var courseIdValue=$("#courseIdInput").val();
        var courseNameValue=$("#courseNameInput").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/course/ChangOne",
            //表明是普通表单提交
            contentType:'application/x-www-form-urlencoded',
            data:{
                "id":courseIdValue,
                "name":courseNameValue,
            },
            dataType:'json',
            success:function (result) {
                if (result.code==0){
                    //再次分页加载并显示在页面上
                    $("#Modal").modal("hide");
                    getListByPage();
                }else {
                    alert(result.message);
                }
            },
            error:function (error) {
                console.log(JSON.stringify(error))
            }
        })
    }
    //显示用户编辑和增加的模态框
    function showModal(course) {
        if (course!=null){
            $("#courseIdInput").val(course.id);
            $("#courseNameInput").val(course.name);
        }else {
            //数据归0
            $("#courseIdInput").val(0);
            $("#courseNameInput").val("");
        }
        $("#Modal").modal("show");
    }
    function deleteOneCourse(id) {
        $.ajax({
            url:"${pageContext.request.contextPath}/course/deleteOne",
            //表明是普通表单提交
            contentType:'application/x-www-form-urlencoded',
            data:{
                "id":id,
            },
            dataType:'json',
            success:function (result) {
                if (result.code==0){
                    getListByPage();
                }else {
                    alert(result.message);
                }
            },
            error:function (error) {
                console.log(JSON.stringify(error))
            }
        })
    }
</script>
</body>
</html>
